import { useEffect } from "react";
import { Card as SemiCard, List, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

import useDeveloper from "../../hooks/resource/useDeveloper";
import useApplication from "../../hooks/organization/useApplication";

import ApplicationDetail from "../../components/organization_application/detail";

const DevelopmentOrganizations = () => {
    const { windowInnerHeight } = useModel("global");
    const { dataLoading, loadDevelopers, developers } = useDeveloper();
    const { dataLoading: appLoading, applications, loadApplications } = useApplication();

    const state = useReactive({
        selectedDeveloper: {},
        selectedApplication: null,
        page: 1,
        pageSize: 20,
    });

    useEffect(() => {
        loadDevelopers();
    }, []);

    useEffect(() => {
        if (developers?.length > 0) {
            let selectedDeveloper = developers.find((item) => item.oiUscc === state.selectedDeveloper?.oiUscc);
            !selectedDeveloper && (selectedDeveloper = developers[0]);
            state.selectedDeveloper = selectedDeveloper;
        }
    }, [developers]);

    const loadDeveloperApplications = () => {
        loadApplications({ appSduu: state.selectedDeveloper.oiUscc, pageSize: state.pageSize, page: state.page });
    };

    useEffect(() => {
        if (state.selectedDeveloper?.oiUscc) {
            loadDeveloperApplications();
        }
    }, [state.selectedDeveloper]);

    useEffect(() => {
        if (applications?.length > 0) {
            let selectedApplication = applications.find((item) => item.appUuid === state.selectedApplication?.appUuid);
            !selectedApplication && (selectedApplication = applications[0]);
            state.selectedApplication = selectedApplication;
        } else {
            state.selectedApplication = {};
        }
    }, [applications]);

    const cardBodyHeight = windowInnerHeight - 90 - 20 - 54;

    return (
        <div style={{ padding: 10, display: "flex" }}>
            <div style={{ width: 300, marginRight: 10 }}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>应用开发组织列表</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh onClick={loadDevelopers} />}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={dataLoading}
                        dataSource={developers}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                className={`list-item ${state.selectedDeveloper?.oiUscc === item?.oiUscc ? "list-selected-item" : ""}`}
                                main={<div>{item?.oiFuna || "-"}</div>}
                                onClick={() => (state.selectedDeveloper = item)}
                            ></List.Item>
                        )}
                    />
                </SemiCard>
            </div>
            <div style={{ width: 300, marginRight: 10 }}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>应用列表</span>}
                    headerExtraContent={
                        <ButtonGroup>
                            <Button icon={<IconRefresh onClick={loadDeveloperApplications} />}></Button>
                        </ButtonGroup>
                    }
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 1, height: cardBodyHeight, overflow: "auto" }}
                >
                    <List
                        loading={appLoading}
                        dataSource={applications}
                        renderItem={(item, index) => (
                            <List.Item
                                key={index}
                                className={`list-item ${state.selectedApplication?.appUuid === item?.appUuid ? "list-selected-item" : ""}`}
                                main={<div title={item?.oiUscc}>{item?.appName || "-"}</div>}
                                onClick={() => (state.selectedApplication = item)}
                            ></List.Item>
                        )}
                    />
                </SemiCard>
            </div>
            <div style={{ flex: 1 }}>
                <SemiCard
                    title={<span style={{ lineHeight: "32px", fontSize: 16, fontWeight: 600 }}>应用信息 - {state.selectedApplication?.appName}</span>}
                    headerExtraContent={<ButtonGroup></ButtonGroup>}
                    headerStyle={{ padding: "10px 14px" }}
                    shadows="always"
                    bordered={false}
                    bodyStyle={{ padding: 10, height: cardBodyHeight }}
                >
                    {state.selectedApplication && <ApplicationDetail item={state.selectedApplication || {}} reloadData={loadApplications} />}
                </SemiCard>
            </div>
        </div>
    );
};

export default DevelopmentOrganizations;
